<template>
  <a-select
    placeholder="请选择"
    style="width: 100%"
    :class="{ requeredSelect: !value && required }"
    :value="value"
    @change="handleChange"
  >
    <a-select-option value="">请选择</a-select-option>
    <a-select-option v-for="item in data" :key="item" :value="item"> {{ item }} </a-select-option>
  </a-select>
</template>

<script>
export default {
  name: 'SelectVfor',
  props: {
    data: {
      type: Array,
      default: [],
    },
    value: {
      type: String,
      default: undefined,
    },
    required: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleChange(value) {
      this.$emit('SelectChange', value)
    },
  },
}
</script>

<style lang="less" scoped>
.requeredSelect {
  /deep/.ant-select-selection {
    border: 1px red solid;
  }
}
</style>